
<template>
    <div class="search">
        <Card>
            <!--顶部-->
            <Row @keydown.enter.native="handleSearch">
                <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                    <Form-item label="时间" prop="startDate">
                        <DatePicker type="month" :value="this.searchForm.startDate" format="yyyy-MM"
                                    show-week-numbers placeholder="输入时间" style="width: 200px" @on-change="selectTime"></DatePicker>
                    </Form-item>
                    <Form-item label="考核状态" prop="riverName">
                        <Select v-model="model1"  style="width:200px">
                            <Option value="1" :key="1">未考核</Option>
                            <Option value="2" :key="2">已考核</Option>
                        </Select>
                    </Form-item>
                    <Form-item style="margin-left:-35px;" class="br">
                        <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                        <Button @click="handleReset">重置</Button>
                    </Form-item>
                </Form>
            </Row>
            <!--底部-->
            <Row type="flex" justify="start" class="code-row-bg">
                <!--左部-->
                <Col span="6">
                    <div class="tree-bar" :style="{maxHeight: maxHeight}">
                        <Tree
                                ref="tree"
                                :data="data"
                                :render="renderContent"
                                @on-check-change="changeSelect"
                                :check-strictly="!strict"
                        ></Tree>
                    </div>
                </Col>
                <Col span="18" >
                    <div style="text-align:center">
                        <h1>{{tableTitle}}{{this.menuForm.withDepartmentName}}断面水质监测结果统计表 &nbsp;&nbsp;
                        <Button style="margin-top: -3px;" type="primary" icon="md-checkmark" @click="updataTable">保存</Button>
                        </h1>
                    </div>
                    <Table
                            :loading="loading" border
                           :columns="columns1"
                           :data="data1"
                           ref="table"
                           sortable="custom"
                    />
                    <!--<Table :show-header="false" width="100%" :columns="columns1" :data="data1"></Table>-->
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Col>
            </Row>
        </Card>

    </div>
</template>

<script>

    import IconChoose from "@/views/my-components/icon-choose";
    import util from "@/libs/util.js";
    export default {
        name: "crossCheck",
        components: {
            IconChoose
        },
        data() {
            return {
                model1: '',
                loading: true,
                strict: true,
                maxHeight: "500px",
                expandLevel: 1,
                // value: new Date,
                columns1: [
                    {
                        title: '河流',
                        key: 'riverName',
                        width: 120,
                    },
                    {
                        title: '断面编号',
                        width: 110,
                        key: 'crossNum'
                    },
                    {
                        title: '断面位置',
                        width: 200,
                        key: 'crossPlace'
                    },
                    {
                        title: '水质标准',
                        width: 200,
                        key: ' waterstandard',
                        render: (h, params) => {
                            return h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        // cursor: "pointer"
                                    }
                                },[
                                    h('div', {
                                        style: {
                                            display: "inline-block",
                                            width:"200px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        }
                                    },(params.row.standardCod!=null&& params.row.standardCod!='')?"化学需氧量(mg/L) ≤ "+params.row.standardCod:''),
                                    h('div',{
                                        style:{
                                            margin:0,
                                            padding:0,
                                            width:"100%",
                                            height:"1px",
                                            backgroundColor:"#e8eaec",
                                            overflow:"hidden",
                                            marginLeft: "-18px"
                                        }
                                    }),
                                    h('div', {
                                        style: {
                                            display: "inline-block",
                                            width:"200px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        }
                                    },(params.row.standardNh3!=null&& params.row.standardNh3!='')?"氨氮(mg/L) ≤ "+params.row.standardNh3:''),
                                    h('div',{
                                        style:{
                                            margin:0,
                                            padding:0,
                                            width:"100%",
                                            height:"1px",
                                            backgroundColor:"#e8eaec",
                                            overflow:"hidden",
                                            marginLeft: "-18px"
                                        }
                                    }),
                                    h('div', {
                                        style: {
                                            display: "inline-block",
                                            width:"200px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        }
                                    },
                                    (params.row.standardTp!=null&& params.row.standardTp!='')?"总磷(mg/L) ≤ "+params.row.standardTp:'')
                                ]
                            );


                        }

                    },
                    {
                        title: '检测结果',
                        width: 190,
                        key: 'testing',
                        render: (h, params) => {
                            return h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        cursor: "pointer"
                                    }
                                },[
                                    h('input', {
                                        style: {
                                            display: "inline-block",
                                            width:"120px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        },
                                        domProps: {
                                            value: params.row.resultCod
                                        },
                                        on: {
                                            input: function (event) {
                                                params.row.resultCod = event.target.value;
                                            },
                                            blur: () => {
                                                this.assignment(params,'resultCod');
                                            }
                                        }
                                    }),
                                    h('div',{
                                        style:{
                                            margin:0,
                                            padding:0,
                                            width:"500px",
                                            height:"1px",
                                            backgroundColor:"#e8eaec",
                                            overflow:"hidden",
                                            marginLeft: "-18px"
                                        }
                                    }),
                                    h('input', {
                                        style: {
                                            display: "inline-block",
                                            width:"120px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        },
                                        domProps: {
                                            value: params.row.resultNh3
                                        },
                                        on: {
                                            input: function (event) {
                                                params.row.resultNh3 = event.target.value;
                                            },
                                            blur: () => {
                                                this.assignment(params,'resultNh3');
                                            }
                                        }
                                    }),
                                    h('div',{
                                        style:{
                                            margin:0,
                                            padding:0,
                                            width:"500px",
                                            height:"1px",
                                            backgroundColor:"#e8eaec",
                                            overflow:"hidden",
                                            marginLeft: "-18px"
                                        }
                                    }),
                                    h('input', {
                                        style: {
                                            display: "inline-block",
                                            width:"120px",
                                            height: "28px",
                                            float: "left",
                                            lineHeight: "28px"
                                        },
                                        domProps: {
                                            value: params.row.resultTp
                                        },
                                        on: {
                                            input: function (event) {
                                                params.row.resultTp = event.target.value;
                                            },
                                            blur: () => {
                                                this.assignment(params,'resultTp');
                                            }
                                        }
                                    }),
                                ]
                            );
                        }
                    },
                    {
                        title: '是否合格',
                        width: 120,
                        key: 'qualified',
                        render: (h, params) => {
                            return h('Select', {
                                    props:{
                                        value: params.row.qualified,
                                        transfer:true,
                                        disabled:true,
                                        placeholder: '是否合格'

                                    },
                                    style: {
                                        width:"100%",
                                    },
                                    // on: {
                                    //     'on-change':(event) => {
                                    //         // params.row.qualified = event;
                                    //         console.log(event);
                                    //         this.data1[params.index].qualified=event;
                                    //     }
                                    // },
                                },
                                [
                                    h('Option',{
                                        props: {
                                            value: '1'
                                        }
                                    },'是'),
                                    h('Option',{
                                        props: {
                                            value: '2'
                                        }
                                    },'否')
                                ]);
                        },
                    },
                ],
                data1: [],
                menuModalVisible: false,
                iconModalVisible: false,
                selectList: [],
                selectCount: 0,
                showParent: false,
                searchKey: "",
                parentTitle: "",
                editTitle: "",
                modalTitle: "",
                searchForm: { // 搜索框初始化对象
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "create_time", // 默认排序字段
                    order: "desc", // 默认排序方式
                    startDate: this.formatDate(new Date), // 起始时间
                    endDate: "" ,// 终止时间
                    withDepartment:'',//城镇id
                },
                total: 0,
                menuForm: {
                    id: "",
                    // title: "",
                    // name: "",
                    // icon: "",
                    // path: "",
                    // component: "",
                    // parentId: "",
                    // buttonType: "",
                    // type: 0,
                    // sortOrder: 0,
                    // level: null,
                    // status: 0,
                    // url: "",
                    withDepartment:'',
                    showAlways: true,
                    withDepartmentName:''
                },
                menuFormAdd: {
                    buttonType: ""
                },
                submitLoading: false,
                data: [],
                dictPermissions: [],
                tableTitle:'',
                //单元格合并数据
                // mergeLineArr:[],
                // mergeLineIndex:0,


            };
        },
        methods: {
            updataTable(){
              console.log("保存",this.data1,typeof(JSON.stringify(this.data1)));
                let sendData = { crossCheck: JSON.stringify(this.data1)}
                this.postRequest("/crossCheck/insertOrUpdate",sendData).then(res => {
                    this.loading = false;
                    if (res.success) {
                        this.$Message.success("操作成功");
                    }
                });
            },
            handleSearch() {
                // this.getTableList();
                this.getAllList();


            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.model1='';
                // this.searchForm.startDate= this.formatDate(new Date),
                // 重新加载数据
                this.getAllList();
            },
            assignment(params,b){
                //判断是否为清除黑臭,如果是清除黑臭，则化学需氧量(mg/L)   总磷(mg/L) 为空
               if(this.isEmpty(this.data1[params.index].standardCod)&&
                   this.isEmpty(this.data1[params.index].standardTp)){
                   if(b=='resultNh3'){
                       if(isNaN(params.row[b]) || this.isEmpty(params.row[b])){
                           this.data1[params.index][b]='';
                           this.data1[params.index].qualified='';
                           return this.$Message.error('请输入数字');
                       }
                       this.data1[params.index][b]=params.row[b];
                       if(this.isNotEmpty(this.data1[params.index].resultNh3)){
                           //判断是否合格
                           if(this.data1[params.index].standardNh3>=this.data1[params.index].resultNh3){
                               this.data1[params.index].qualified='1';
                           }else{
                               this.data1[params.index].qualified='2';
                           }

                       }
                   }else{
                       this.data1[params.index][b]='';
                       return this.$Message.error('无需填写此项');
                   }



               }else{
                   if(isNaN(params.row[b]) || this.isEmpty(params.row[b])){
                       this.data1[params.index][b]='';
                       this.data1[params.index].qualified='';
                       return this.$Message.error('请输入数字');
                   }
                   this.data1[params.index][b]=params.row[b];
                   // standardCod: "40"
                   // standardNh3: "2"
                   // standardTp: "0.4"
                   // resultCod: "2"
                   // resultNh3: "2"
                   // resultTp: "3"
                   if(this.isNotEmpty(this.data1[params.index].resultCod)&&
                       this.isNotEmpty(this.data1[params.index].resultNh3)&&
                       this.isNotEmpty(this.data1[params.index].resultTp)){
                       //判断是否合格
                       if(this.data1[params.index].standardCod>=this.data1[params.index].resultCod &&
                           this.data1[params.index].standardNh3>=this.data1[params.index].resultNh3 &&
                           this.data1[params.index].standardTp>=this.data1[params.index].resultTp
                       ){
                           this.data1[params.index].qualified='1';
                       }else{
                           this.data1[params.index].qualified='2';
                       }

                   }
               }
            },
            isNotEmpty(val){
                return !this.isEmpty(val);
            },
            isEmpty(val) {
                if (
                    val === null ||
                    typeof val === 'undefined' ||
                    (typeof val === 'string' && val === '' && val !== 'undefined')
                ) {
                    return true ;
                }
                return false ;
            },
            init() {
                //左侧列表
                this.getAllList();

                //table头部显示默认日期
               this.selectTime(this.formatDate(new Date));
            },
             formatDate(date) {
                let d = new Date(date),
                    month = '' + (d.getMonth() + 1),
                    // day = '' + d.getDate(),
                    year = d.getFullYear();
                if (month.length < 2) month = '0' + month;
                // if (day.length < 2) day = '0' + day;
                return [year, month].join('-');
            },
            selectTime(e){
                let arr = e.split("-");
                this.tableTitle=arr[0]+"年"+arr[1]+"月";
                this.searchForm.startDate=e;
                console.log("e",e)
            },
            getTableList(){
                this.loading = true;
                //首次查询查出所有
                this.getRequest("/crossCheck/getByPage",this.searchForm).then(res => {
                    this.loading = false;
                    if (res.success) {
                        // 仅展开指定级数 默认后台已展开所有
                        this.data1 = res.result.records;
                        this.total = res.result.total;
                    }
                });
            },
            renderContent(h, { root, node, data }) {
                return h(
                    "span",
                    {
                        style: {
                            display: "inline-block",
                            cursor: "pointer",
                            background:"#fafafa"
                        },
                        on: {
                            click: () => {
                                this.selectTree(data);
                            }
                        }
                    },
                    [
                        h("span",{
                            class: {
                                "ivu-tree-title": true,
                                "ivu-tree-title-selected": data.id == this.menuForm.id
                            }
                        }, [
                            h("div", {
                                style:{
                                    "float":"left",
                                    "fontSize": "16px",
                                    "width":"145px"
                                }
                            },data.withDepartmentName),
                            h("Tag", {
                                style:{
                                    "float":"right"
                                },
                                props: {
                                    color: data.sta ==='1'?'red':'green'
                                }
                            },data.sta ==='1'?'未考核':'已考核')
                        ])
                    ]
                );
            },
            // handleDropdown(name) {
            //     if (name == "expandOne") {
            //         this.expandLevel = 1;
            //         this.getAllList();
            //     } else if (name == "expandTwo") {
            //         this.expandLevel = 2;
            //         this.getAllList();
            //     } else if (name == "expandThree") {
            //         this.expandLevel = 3;
            //         this.getAllList();
            //     }
            //     if (name == "expandAll") {
            //         this.expandLevel = 4;
            //         this.getAllList();
            //     } else if (name == "refresh") {
            //         this.getAllList();
            //     }
            // },
            getAllList() {
                this.loading = true;
                this.getRequest("/cross/getAllByUserId",{data:this.searchForm.startDate,model1:this.model1}).then(res => {
                    this.loading = false;
                    if (res.success) {
                        // 仅展开指定级数 默认后台已展开所有
                        if(res.result.length>0){
                            this.menuForm=res.result[0];
                            this.searchForm.withDepartment=res.result[0].withDepartment
                            //table表格
                            this.getTableList();
                        }
                        this.data = res.result;
                    }
                });
            },

            selectTree(v) {
                if (v && v.id != this.menuForm.id) {
                    // 转换null为""
                    for (let attr in v) {
                        if (v[attr] == null) {
                            v[attr] = "";
                        }
                    }
                    console.log("selectTree",v)
                    let str = JSON.stringify(v);
                    let menu = JSON.parse(str);
                    this.menuForm = menu;
                    this.editTitle = menu.title;
                    this.searchForm.withDepartment=v.withDepartment;
                    //table表格
                    this.getTableList();
                } else {
                    this.cancelEdit();
                }
            },
            cancelEdit() {
                let data = this.$refs.tree.getSelectedNodes()[0];
                if (data) {
                    data.selected = false;
                }
                this.$refs.menuForm.resetFields();
                this.menuForm.id = "";
                delete this.menuForm.id;
                this.editTitle = "";
            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;

            },
            // handleSpan ({ row, column, rowIndex, columnIndex }) {
            //     console.lovg("画单元格数据",this.mergeLineArr)
            //     if (columnIndex === 0 || columnIndex === 1) {
            //         const _row = this.mergeLineArr[rowIndex];
            //         const _col = _row > 0 ? 1 : 0;
            //         return {
            //             rowspan: _row,
            //             colspan: _col
            //         }
            //     }
            //
            // },
            // mergeLineMethod (){
            //     //处理合并表格数据
            //     let mergeLine=this.data1;
            //     mergeLine.forEach((res,i) => {
            //         if (i === 0) {
            //             this.mergeLineArr.push(1);
            //             this.mergeLineIndex= 0
            //         } else {
            //             // 判断当前元素与上一个元1素是否相同,是就给之前相同的第一个+1，并且数组添加一个0
            //             if (mergeLine[i].name === mergeLine[i - 1].name) {
            //                 this.mergeLineArr[this.mergeLineIndex] += 1;
            //                 this.mergeLineArr.push(0);
            //             } else {//如果与前一个不相同，则追加一个新从1开始的数字，此时更新mergeLineIndex的值
            //                 this.mergeLineArr.push(1);
            //                 this.mergeLineIndex= i;
            //             }
            //         }
            //     });
            //     console.log("处理单元格数据",this.mergeLineArr,this.mergeLineIndex)
            // },
        },
        mounted() {
            // 计算高度
            let height = document.documentElement.clientHeight;
            this.maxHeight = Number(height - 287) + "px";
            this.init();
            //处理单元格合并
            // this.mergeLineMethod();
        }
    };
</script>
<style lang="less">
    .search {
        .operation {
            margin-bottom: 2vh;
        }
        .select-count {
            font-size: 13px;
            font-weight: 600;
            color: #40a9ff;
        }
        .select-title {
            font-size: 12px;
            font-weight: 600;
            color: #40a9ff;
        }
        .select-clear {
            margin-left: 10px;
        }
        .page {
            margin-top: 2vh;
        }
        .drop-down {
            font-size: 13px;
            margin-left: 5px;
        }
    }

    .ivu-tree {
        .ivu-tree-empty {
            margin-top: 10px;
        }
    }

    .tree-bar {
        overflow: auto;
        margin-top: 5px;
    }

    .tree-bar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .tree-bar::-webkit-scrollbar-thumb {
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 2px #d1d1d1;
        background: #e4e4e4;
    }

</style>